<template>
  <div class="thumb-swiper-wrapper">
    <!-- swiper1 -->
    <div ref="swiperTop" class="gallery-top swiper-container">
      <div class="swiper-wrapper">
        <div v-for="item in imgList" :key="item.url" class="swiper-slide top-slide-item">
          <div v-if="item.type === 'video'" class="top-side-img">
            <video :src="item.url" controls object-fit="fill" />
          </div>

          <iframe
            v-else-if="item.type === 'vr'"
            :src="item.url"
            frameborder="0"
            width="100%"
            height="100%"
            allowFullScreen="true"
          ></iframe>

          <el-image v-else class="top-side-img" :src="item.url" fit="cover" />
        </div>
      </div>
      <div class="swiper-button-next swiper-button-white"></div>
      <div class="swiper-button-prev swiper-button-white"></div>
    </div>
    <!-- swiper2 Thumbs -->
    <div ref="swiperThumbs" thumbsSlider="" class="gallery-thumbs swiper-container">
      <div class="swiper-wrapper">
        <div v-for="item in imgList" :key="item.url" class="swiper-slide thumb-slide-item">
          <div v-if="item.type === 'video'" class="top-side-img">
            <video :src="item.url" object-fit="fill" />
          </div>
          <el-image v-else-if="item.type === 'vr'" :src="vrBanner"></el-image>
          <el-image v-else :src="item.url" fit="cover" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
// import { Swiper } from 'swiper'
// import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
// import 'swiper/css/swiper.css'
import vrBanner from '@/assets/img/vr_s.png'
export default Vue.extend({
  // components: { Swiper, SwiperSlide },
  props: {
    imgList: {
      type: Array,
      default: () => [
        {
          url: 'https://iph.href.lu/570x342',
        },
      ],
    },
  },
  data() {
    return {
      vrBanner,
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        const swiperThumbs = new this.$Swiper(this.$refs.swiperThumbs, {
          loop: true,
          spaceBetween: 10,
          // centeredSlides: true,
          slidesPerView: 4,
          watchSlidesVisibility: true,
        })

        const swiperMain = new this.$Swiper(this.$refs.swiperTop, {
          loop: true,
          spaceBetween: 10,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          thumbs: {
            swiper: swiperThumbs,
          },
        })
        console.log(swiperThumbs, swiperMain)
      }, 1000)

      // const swiperTop = this.$refs.swiperTop.$swiper
      // const swiperThumbs = this.$refs.swiperThumbs.$swiper
      // swiperTop.controller.control = swiperThumbs
      // swiperThumbs.controller.control = swiperTop

      // this.swiperOptionTop.loopedSlides = this.imgList.length
      // this.swiperOptionThumbs.loopedSlides = this.imgList.length
      // this.swiperOptionThumbs.slidesPerView = this.imgList.length > 5 ? 5 : this.imgList.length
    })
  },
})
</script>
<style lang="scss" scoped>
.thumb-swiper-wrapper {
  width: 572px;
  overflow: hidden;

  .el-image {
    width: 100%;
    height: 100%;
  }

  .gallery-top {
    @apply border-gray-200 border-[1px] rounded-md mb-4 overflow-hidden;

    .top-slide-item {
      @apply w-[570px] h-[342px];
    }
  }

  .top-side-img {
    @apply w-full h-full bg-black flex items-center;
  }

  .gallery-thumbs {
    .thumb-slide-item {
      @apply border-gray-200 border-[1px] rounded-md overflow-hidden
       h-[80px];
    }

    .swiper-slide-thumbs-active {
      @apply opacity-100;
    }
  }
}
</style>
